<template>
  <div class="main">
    <el-tabs v-model="active"
             ref="tabs"
             type="card"
             @tab-click="handleClick"
             class="tab">
      <el-tab-pane :label="item.label"
                   v-for="(item) in tabs"
                   :key="item.key"
                   :name="item.key">
        <tabList ref="tb"></tabList>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import tabList from './component/tabList.vue'
export default {
  data () {
    return {
      active: 'all',
      tabs: [
        { label: '全部用户', key: 'all' },
        { label: '用户', key: 'USER' },
        { label: '员工', key: 'STAFF' },
        { label: '管理员', key: 'ADMIN' },
      ],
    }
  },
  components: {
    tabList
  },
  methods: {
    handleClick (tab) {
      tab.$children[0].list(this.active)
    }
  }

}
</script>

<style lang="sass" scoped>
.main
	padding: 20px
</style>